<template>
    <div class="scroll-box">
        <scroll-tab :list="tabList" @goView="goView" :index="tabIndex"></scroll-tab>
        <div class="scroll-y" ref="scroll_y">
            <div class="scroll-layut">
                <div class="scroll" v-for="(item, i) in tabList" :key="i" :ref="'scroll' + i">
                    <slot :name="'scroll' + i" :item="item"> </slot>
                </div>
            </div>
        </div>
        <slot name="pop"></slot>
        <slot name="btn"></slot>
    </div>
</template>

<script>
import BetterScroll from "better-scroll";
import scrollTab from "./scroll-tab.vue";
export default {
    name: "qg-scroll-box",
    props: {
        tabList: {
            type: Array,
            default: () => ["报名信息", "基本信息", "注册信息", "服务信息"],
        },
    },
    components: {
        scrollTab,
    },
    data() {
        return {
            betterS: null,
            tabIndex: 0,
            nodeArr: [],
            isUpdate: false,
        };
    },
    mounted() {
        setTimeout(() => {
            this.initScroll();
            console.log(this.betterS, "this.betterS");
        });
        this.nodeArr = this.tabList.map((v, i) => {
            return "scroll" + i;
        });
    },
    methods: {
        goView(i) {
            this.$nextTick(() => {
                let scroll = this.$refs["scroll" + i];
                this.betterS.scrollToElement(scroll[0], 500, 0, 0);
            });
        },
        initScroll() {
            this.betterS = new BetterScroll(this.$refs.scroll_y, {
                startY: 0,
                startX: 0,
                click: true,
                scrollY: true,
                // 忽略竖直方向的滚动
                scrollX: false,
                // eventPassthrough: 'vertical',
                // eventPassthrough: 'horizontal',
                bounce: true,
                pullUpLoad: true,
                pullDownRefresh: false,
                // slide: true,
                mouseWheel: {
                    speed: 20,
                    invert: false,
                    easeTime: 300,
                },
            });
            // this.betterS.refresh()
            this.betterS.on("scroll", this.onscroll);
            this.betterS.on("scrollEnd", this.onscrollEnd);
            this.betterS.on("pullingUp", this.onpullingup);
            this.betterS.refresh();
            // this.betterS.on("pullingDown", this.onpullingDown);
        },
        async onscroll(res) {
            let arrs = [];
            let arr = "";
            await this.nodeArr.forEach(async (v, i) => {
                arr = await this.roll(v, i);
                arrs.push(arr);
            });
            let a = arrs[0];
            let b = arrs[0] + arrs[1];
            let c = arrs[0] + arrs[1] + arrs[2];
            // console.log(a, b, c)
            let y = Math.abs(res.y) + 10;
            // console.log(y)
            // if (y > c) {
            //     this.tabIndex = 3
            // } else if (y > b) {
            //     this.tabIndex = 2
            // } else if (y > a) {
            //     this.tabIndex = 1
            // } else {
            //     this.tabIndex = 0
            // }
            if (y < a) {
                this.tabIndex = 0;
            } else if (y < b) {
                this.tabIndex = 1;
            } else if (y < c) {
                this.tabIndex = 2;
            } else {
                this.tabIndex = 3;
            }
        },
        async onscrollEnd(res) {
            this.betterS.refresh();
        },
        onpullingDown() {
            console.log("上拉加载");
            this.isUpdate = true;
            setTimeout(() => {
                // this.$notify.success('更新成功')
                this.isUpdate = false;
                this.betterS.finishPullDown();
            }, 2000);
        },
        onpullingup() {
            // this.$notify.success('下拉加载')
            console.log("下拉加载");
            this.betterS.finishPullUp();
        },
        roll(el, i) {
            return new Promise((res, err) => {
                let node = document.querySelector("." + el);
                res(node.clientHeight);
            });
        },
    },
    computed: {
        idd() {
            let tiem = new Date().getTime();
            return (
                Math.random()
                    .toString(16)
                    .substr(2, 6) + tiem
            );
        },
    },
    destroyed() {
        this.betterS.off("scroll", this.onscroll); // 移除scroll事件回调onscroll
        this.betterS.off("pullingUp", this.onpullingup); // 移除pullingup事件回调onPullingUp
        this.betterS.off("scrollEnd", this.onscrollEnd); // 移除scrollEnd事件回调onscrollEnd
    },
};
</script>

<style lang="less" scoped>
.scroll-box {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.scroll-y {
    flex: 1;
    width: 100%;
    overflow: hidden;
    .scroll-layut {
        width: 100%;
    }
}
</style>
